Next.js μΈν°μ μ λΌμ°νΈμ λν μ¬μΈ΅ λΆμμΌλ‘, ν₯μλ μ¬μ©μ κ²½νμ μν μ€μ©μ μΈ λͺ¨λ¬ λ° μ€λ²λ μ΄ κ΅¬ν μ λ΅μ μκ°ν©λλ€.
Next.js μΈν°μ μ λΌμ°νΈ: λͺ¨λ¬ λ° μ€λ²λ μ΄ ν¨ν΄ λ§μ€ν°νκΈ°
μΈκΈ° μλ React νλ μμν¬μΈ Next.jsλ κ³ μ±λ₯μ νμ₯ κ°λ₯ν μΉ μ ν리μΌμ΄μ μ ꡬμΆνκΈ° μν κ°λ ₯ν κΈ°λ₯λ€μ μ 곡ν©λλ€. κ·Έμ€ νλμΈ μΈν°μ μ λΌμ°νΈ(Interception Routes)λ 볡μ‘ν λΌμ°ν μλ리μ€, νΉν λͺ¨λ¬ λ° μ€λ²λ μ΄ ν¨ν΄μ ꡬνν λ μ κ΅ν λ°©λ²μ μ 곡ν©λλ€. μ΄ μ’ ν© κ°μ΄λμμλ μΈν°μ μ λΌμ°νΈλ₯Ό νμ©νμ¬ μννκ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ λ§λλ λ°©λ²μ νμν©λλ€.
μΈν°μ μ λΌμ°νΈλ 무μμΈκ°?
μΈν°μ μ λΌμ°νΈλ₯Ό μ¬μ©νλ©΄ λΈλΌμ°μ μ URLμ λ³κ²½νμ§ μκ³ λ λΌμ°νΈλ₯Ό κ°λ‘μ± λ€λ₯Έ UIλ₯Ό λ λλ§ν μ μμ΅λλ€. μ¬μ©μ κ²½νμ νλΆνκ² νλ μΌμμ μΈ μ°νλ‘λΌκ³ μκ°νλ©΄ λ©λλ€. μ΄λ νΉν λ€μκ³Ό κ°μ κ²½μ°μ μ μ©ν©λλ€:
- λͺ¨λ¬: μ νμ΄μ§λ‘ μ΄λνμ§ μκ³ λͺ¨λ¬ μ°½μ μ½ν μΈ λ₯Ό νμν©λλ€.
- μ€λ²λ μ΄: κΈ°μ‘΄ μ½ν μΈ μμ μΆκ° μ 보λ 컨νΈλ‘€μ νμν©λλ€.
- μ΄λ―Έμ§ κ°€λ¬λ¦¬: μ΄λ―Έμ§ κ°€λ¬λ¦¬ λ΄μμ λΆλλ¬μ΄ νμ΄μ§ μ΄λκ³Ό κ°μ νμ κ²½νμ λ§λλλ€.
- μ¨λ³΄λ© νλ‘μ°: μ 체 νμ΄μ§ μλ‘κ³ μΉ¨ μμ΄ λ€λ¨κ³ νλ‘μΈμ€λ₯Ό ν΅ν΄ μ¬μ©μλ₯Ό μλ΄ν©λλ€.
λͺ¨λ¬ λ° μ€λ²λ μ΄μ μΈν°μ μ λΌμ°νΈλ₯Ό μ¬μ©νλ μ΄μ λ 무μμΈκ°?
λͺ¨λ¬ λ° μ€λ²λ μ΄λ₯Ό μ²λ¦¬νλ μ ν΅μ μΈ λ°©λ²μ μ’ μ’ μ»΄ν¬λνΈ λ΄μμ μνλ₯Ό κ΄λ¦¬ν΄μΌ νλ―λ‘ λ³΅μ‘ν΄μ§κ³ μ±λ₯ λ¬Έμ λ₯Ό μΌκΈ°ν μ μμ΅λλ€. μΈν°μ μ λΌμ°νΈλ μ¬λ¬ κ°μ§ μ΄μ μ μ 곡ν©λλ€:
- ν₯μλ SEO: λͺ¨λ¬μ΄λ μ€λ²λ μ΄μ νμλλ μ½ν μΈ λ νΉμ λΌμ°νΈμ μ°κ²°λμ΄ μμΌλ―λ‘ κ²μ μμ§μ κ³μ μ‘μΈμ€ν μ μμ΅λλ€.
- 곡μ κ°λ₯ν URL: μ¬μ©μλ λͺ¨λ¬μ΄λ μ€λ²λ μ΄ μ½ν μΈ μ λν μ§μ λ§ν¬λ₯Ό 곡μ ν μ μμ΅λλ€.
- λΈλΌμ°μ νμ€ν 리: λΈλΌμ°μ μ λ€λ‘ κ°κΈ° λ° μμΌλ‘ κ°κΈ° λ²νΌμ΄ μμλλ‘ μλνμ¬ μ¬μ©μκ° λͺ¨λ¬ νμ€ν 리λ₯Ό νμν μ μμ΅λλ€.
- λ¨μνλ μν κ΄λ¦¬: λͺ¨λ¬ κ°μμ± μν κ΄λ¦¬μ 볡μ‘μ±μ μ€μ¬ λ κΉ¨λνκ³ μ μ§ κ΄λ¦¬νκΈ° μ¬μ΄ μ½λλ₯Ό λ§λλλ€.
- ν₯μλ μ±λ₯: λͺ¨λ¬ μ½ν μΈ λ§ μ λ°μ΄νΈνμ¬ λΆνμν 리λ λλ§μ λ°©μ§ν©λλ€.
Next.jsμμ μΈν°μ μ λΌμ°νΈ μ€μ νκΈ°
μ€μ©μ μΈ μμ λ₯Ό ν΅ν΄ μΈν°μ μ λΌμ°νΈλ₯Ό ꡬννλ λ°©λ²μ μ€λͺ ν΄ λ³΄κ² μ΅λλ€: μ μ μκ±°λ μ ν리μΌμ΄μ μμ μ ν μμΈ μ 보λ₯Ό νμνκΈ° μν λͺ¨λ¬ λ§λ€κΈ°.
νλ‘μ νΈ κ΅¬μ‘°
λ¨Όμ , λλ ν 리 ꡬ쑰λ₯Ό μ μν΄ λ³΄κ² μ΅λλ€. κ° μ νμ κ³ μ IDκ° μλ `products` λλ ν λ¦¬κ° μλ€κ³ κ°μ ν©λλ€.
app/
products/
[id]/
page.js // Product details page
@modal/
[id]/
page.js // Modal content for product details
default.js // Layout for products directory
page.js // Home page
μ€λͺ
- `app/products/[id]/page.js`: κΈ°λ³Έ μ ν μμΈ νμ΄μ§μ λλ€.
- `app/products/@modal/[id]/page.js`: λͺ¨λ¬ μ½ν μΈ λ₯Ό λ λλ§ν μΈν°μ μ λΌμ°νΈλ₯Ό μ μν©λλ€. `@modal` κ·μΉμ μ£Όλͺ©νμΈμ β μ΄κ²μ Next.jsκ° μΈν°μ μ λΌμ°νΈλ₯Ό μΈμνλ λ° λ§€μ° μ€μν©λλ€.
- `app/products/default.js`: `products` λλ ν 리μ λ μ΄μμμ λλ€. μ΄ λ μ΄μμ μμ `@modal` λΌμ°νΈλ₯Ό κ°μΈλ κ²μ΄ νμν©λλ€.
- `app/page.js`: μ°λ¦¬ μ νμΌλ‘ μ°κ²°λλ λ§ν¬λ₯Ό ν¬ν¨ν ννμ΄μ§μ λλ€.
μ½λ ꡬν
1. ννμ΄μ§ (app/page.js)
μ΄ νμ΄μ§λ μ ν λͺ©λ‘μ νμνλ©°, κ° μ νμλ μ ν μμΈ μ 보λ₯Ό λͺ¨λ¬λ‘ μ¬λ λ§ν¬κ° μμ΅λλ€.
// app/page.js
import Link from 'next/link';
const products = [
{ id: '1', name: 'Laptop' },
{ id: '2', name: 'Smartphone' },
{ id: '3', name: 'Tablet' },
];
export default function Home() {
return (
Product List
{products.map((product) => (
-
{product.name}
))}
);
}
2. μ ν μμΈ νμ΄μ§ (app/products/[id]/page.js)
μ΄ νμ΄μ§λ μ 체 μ ν μμΈ μ 보λ₯Ό λ λλ§ν©λλ€. μ€μ μ ν리μΌμ΄μ μμλ APIλ λ°μ΄ν°λ² μ΄μ€μμ λ°μ΄ν°λ₯Ό κ°μ Έμ¬ κ²μ λλ€. μ€μνκ², μλ μ ν λͺ©λ‘μΌλ‘ λμκ°λ λ§ν¬λ₯Ό μ 곡ν©λλ€.
// app/products/[id]/page.js
import Link from 'next/link';
export default function ProductDetails({ params }) {
const { id } = params;
return (
Product Details
Product ID: {id}
This is the full product details page.
Back to Product List
);
}
3. λͺ¨λ¬ μ½ν μΈ (app/products/@modal/[id]/page.js)
μ΄ λΆλΆμ΄ ν΅μ¬μΈ μΈν°μ μ λΌμ°νΈμ λλ€. λμΌν μ ν IDλ₯Ό μ¬μ©νμ¬ λͺ¨λ¬ μ½ν μΈ λ₯Ό λ λλ§ν©λλ€. IDμ μ κ·ΌνκΈ° μν΄ `useParams` ν μ μ¬μ©νλ μ μ μ£Όλͺ©νμΈμ.
// app/products/@modal/[id]/page.js
'use client';
import { useParams } from 'next/navigation';
import styles from './modal.module.css';
export default function ProductModal() {
const params = useParams();
const { id } = params;
return (
);
}
μ°Έκ³ : `'use client';` μ§μλ¬Έμ ν΄λΌμ΄μΈνΈ μΈ‘ μνΈμμ©, νΉν `useParams`λ₯Ό μ¬μ©ν λ νμν©λλ€.
μ€νμΌλ§ (modal.module.css): κΈ°λ³Έ λͺ¨λ¬ μ€νμΌλ§μ μν΄ κ°λ¨ν CSS λͺ¨λμ΄ μ¬μ©λ©λλ€. μ΄λ λͺ¨λ¬μ μ¬λ°λ₯΄κ² λ°°μΉνλ λ° μ€μν©λλ€.
/* modal.module.css */
.modalOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* Ensure it's on top */
}
.modalContent {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 600px;
}
4. λ μ΄μμ (app/products/default.js)
μ΄ λ μ΄μμμ `@modal` λΌμ°νΈλ₯Ό κ°μΈμ μ ν 컨ν μ€νΈ λ΄μμ λ λλ§λλλ‘ λ³΄μ₯ν©λλ€.
// app/products/default.js
export default function ProductsLayout({ children }) {
return (
{children}
);
}
μλ λ°©μ
- μ¬μ©μκ° ννμ΄μ§μμ μ ν λ§ν¬(μ: `/products/1`)λ₯Ό ν΄λ¦νλ©΄ Next.jsλ μ΄λ₯Ό `products` λλ ν 리 λ΄μ λΌμ°νΈλ‘ μΈμν©λλ€.
- `@modal` μΈν°μ μ λΌμ°νΈ λλ¬Έμ Next.jsλ `@modal` μλμ μΌμΉνλ λΌμ°νΈκ° μλμ§ νμΈν©λλ€.
- μΌμΉνλ νλͺ©(μ: `/products/@modal/1`)μ΄ λ°κ²¬λλ©΄ Next.jsλ `app/products/@modal/[id]/page.js`μ μ½ν μΈ λ₯Ό νμ¬ νμ΄μ§ λ΄μμ λ λλ§ν©λλ€. λΈλΌμ°μ μ URLμ `/products/1`λ‘ μ μ§λ©λλ€.
- `modalOverlay` μ€νμΌμ λͺ¨λ¬μ κΈ°λ³Έ μ½ν μΈ μμ μμΉμν΅λλ€.
- "λͺ¨λ¬ λ«κΈ°"λ₯Ό ν΄λ¦νλ©΄ `history.back()`μ μ¬μ©νμ¬ λ€λ‘ μ΄λνλ©°, ν¨κ³Όμ μΌλ‘ λͺ¨λ¬μ λ«κ³ μ΄μ μνλ‘ λμκ°λλ€.
κ³ κΈ μΈν°μ μ λΌμ°νΈ κΈ°λ²
1. λ€λ‘ κ°κΈ° λ²νΌ μ²λ¦¬
λͺ¨λ¬ ꡬνμ μ€μν μΈ‘λ©΄μ λΈλΌμ°μ μ λ€λ‘ κ°κΈ° λ²νΌμ΄ μ¬λ°λ₯΄κ² μλνλλ‘ λ³΄μ₯νλ κ²μ λλ€. μ¬μ©μκ° λͺ¨λ¬μ μ΄κ³ λ€λ‘ κ°κΈ° λ²νΌμ ν΄λ¦νλ©΄, μ ν리μΌμ΄μ μμ λ€λ₯Έ κ³³μΌλ‘ μ΄λνλ κ²μ΄ μλλΌ μ΄μμ μΌλ‘λ λͺ¨λ¬μ λ«κ³ μ΄μ 컨ν μ€νΈλ‘ λμκ°μΌ ν©λλ€.
μμ μμ μ¬μ©λ `history.back()` λ©μλλ λΈλΌμ°μ νμ€ν 리μμ ν λ¨κ³ λ€λ‘ μ΄λνμ¬ μ΄ ν¨κ³Όλ₯Ό λ¬μ±ν©λλ€. κ·Έλ¬λ λ 볡μ‘ν μλ리μ€μμλ νμ¬ λΌμ°ν μνλ₯Ό κ³ λ €νλ μ¬μ©μ μ μ λ€λ‘ κ°κΈ° λ²νΌ νΈλ€λ¬λ₯Ό ꡬνν΄μΌ ν μλ μμ΅λλ€.
2. λμ λͺ¨λ¬ μ½ν μΈ
μ€μ μ ν리μΌμ΄μ μμλ λͺ¨λ¬ μ½ν μΈ κ° μ ν IDλ₯Ό κΈ°λ°μΌλ‘ APIλ λ°μ΄ν°λ² μ΄μ€μμ κ°μ Έμ¨ λμ μΈ λ΄μ©μΌ κ°λ₯μ±μ΄ λμ΅λλ€. λͺ¨λ¬ μ»΄ν¬λνΈ λ΄μμ `fetch` APIλ SWR λλ React Queryμ κ°μ λ°μ΄ν° κ°μ Έμ€κΈ° λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ νμν λ°μ΄ν°λ₯Ό κ²μν μ μμ΅λλ€.
// app/products/@modal/[id]/page.js
'use client';
import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';
export default function ProductModal() {
const params = useParams();
const { id } = params;
const [product, setProduct] = useState(null);
useEffect(() => {
async function fetchProduct() {
const res = await fetch(`/api/products/${id}`); // Replace with your API endpoint
const data = await res.json();
setProduct(data);
}
fetchProduct();
}, [id]);
if (!product) {
return Loading...
;
}
return (
{product.name}
{product.description}
{/* ... other product details ... */}
history.back()}>Close Modal
);
}
3. μ€μ²©λ λͺ¨λ¬
μΈν°μ μ λΌμ°νΈλ₯Ό μ€μ²©νμ¬ λ³΅μ‘ν λͺ¨λ¬ μν¬νλ‘μ°λ₯Ό λ§λ€ μ μμ΅λλ€. μλ₯Ό λ€μ΄, μ¬μ©μκ° μ ν μμΈ λͺ¨λ¬μ μ΄κ³ λ²νΌμ ν΄λ¦νμ¬ κ΄λ ¨ μ ν λͺ¨λ¬μ μ΄ μ μμ΅λλ€. μ΄λ `@modal` λλ ν 리 λ΄μ μΆκ°μ μΈ μΈν°μ μ λΌμ°νΈλ₯Ό μμ±νμ¬ λ¬μ±ν μ μμ΅λλ€.
4. 404 μ€λ₯ μ²λ¦¬
μ¬μ©μκ° μ ν¨νμ§ μμ μ ν ID(μ: `/products/@modal/nonexistent`)λ₯Ό κ°μ§ λͺ¨λ¬ URLλ‘ μ΄λνλ μλ리μ€λ₯Ό κ³ λ €ν΄μΌ ν©λλ€. μ¬μ©μ μΉνμ μΈ 404 νμ΄μ§λ₯Ό νμνκ±°λ μ¬μ©μλ₯Ό μ ν¨ν μ ν νμ΄μ§λ‘ 리λλ μ νλ μ μ ν μ€λ₯ μ²λ¦¬λ₯Ό ꡬνν΄μΌ ν©λλ€.
// app/products/@modal/[id]/page.js
// ... (rest of the component)
if (!product) {
return Product not found.
; // Or redirect to a 404 page
}
// ... (rest of the component)
5. μ€λ²λ μ΄ ν¨ν΄
μ§κΈκΉμ§μ μμ λ λͺ¨λ¬μ μ€μ μ λμμ§λ§, μΈν°μ μ λΌμ°νΈλ μ€λ²λ μ΄μλ μ¬μ©ν μ μμ΅λλ€. μ½ν μΈ λ₯Ό μ€μμ λ°°μΉνλ λμ , μ€λ²λ μ΄λ μ¬μ΄λλ°λ νλ©΄ μΈ‘λ©΄μμ μ¬λΌμ΄λλλ ν¨λλ‘ λνλ μ μμ΅λλ€. CSS μ€νμΌλ§μ λ€λ₯΄κ² μ§λ§, λΌμ°ν λ‘μ§μ λμΌνκ² μ μ§λ©λλ€.
μ€μ μ¬λ‘ λ° μ¬μ© μμ
- μ μμκ±°λ: μ ν μμΈ μ 보, μΌν μΉ΄νΈ μμ½ λλ κ²°μ νλ¦μ λͺ¨λ¬μ΄λ μ€λ²λ μ΄μ νμ.
- μμ λ―Έλμ΄: μ΄λ―Έμ§ 미리보기, λκΈ μΉμ λλ μ¬μ©μ νλ‘νμ λͺ¨λ¬μ νμ.
- λ¬Έμ κ΄λ¦¬: λ¬Έμ 미리보기, νΈμ§ λꡬ λλ λ²μ κΈ°λ‘μ μ€λ²λ μ΄μ νμ.
- μ§λ μ ν리μΌμ΄μ : μμΉ μΈλΆ μ 보, κ΄μ¬ μ§μ λλ κ²½λ‘ μ 보λ₯Ό μ€λ²λ μ΄μ νμ.
- CRM μμ€ν : μ°λ½μ² μΈλΆ μ 보, νλ λ‘κ·Έ λλ μμ κΈ°νλ₯Ό λͺ¨λ¬μ νμ.
μμ: κ΅μ μ μμκ±°λ νλ«νΌ κΈλ‘λ² μ μμκ±°λ μ¬μ΄νΈλ₯Ό μμν΄ λ³΄μΈμ. μ¬μ©μκ° μ νμ ν΄λ¦νλ©΄ μμΈ μ λ³΄κ° λͺ¨λ¬λ‘ μ΄λ¦½λλ€. URLμ `/products/[product_id]`λ‘ λ³κ²½λμ΄ μ§μ λ§ν¬ λ° SEO μ΄μ μ μ 곡ν©λλ€. μ¬μ©μκ° λͺ¨λ¬ νμ΄μ§μμ μΈμ΄λ₯Ό μ ννλ©΄(μ: μμ΄μμ μ€νμΈμ΄λ‘), μ ν μμΈ μ 보λ μ νλ μΈμ΄λ‘ κ°μ Έμμ§κ³ λͺ¨λ¬ μ½ν μΈ λ μννκ² μ λ°μ΄νΈλ©λλ€. λν, μ¬μ΄νΈλ (λμ νμ) μ¬μ©μμ μμΉλ₯Ό κ°μ§νκ³ ν΄λΉ μ§μκ³Ό κ΄λ ¨λ λ°°μ‘ μ 보λ₯Ό λͺ¨λ¬ λ΄μ νμν μ μμ΅λλ€.
μΈν°μ μ λΌμ°νΈ μ¬μ©μ μν λͺ¨λ² μ¬λ‘
- λͺ¨λ¬ μ½ν μΈ λ κ°κ²°νκ² μ μ§: λͺ¨λ¬μ λ무 λ§μ μ 보λ₯Ό κ³Όλνκ² λ΄μ§ λ§μΈμ. νμμ μΈ μΈλΆ μ 보λ₯Ό μ μνλ λ° μ§μ€νμΈμ.
- λͺ νν λ΄λΉκ²μ΄μ μ 곡: μ¬μ©μκ° μ½κ² λͺ¨λ¬μ λ«κ³ μ΄μ 컨ν μ€νΈλ‘ λμκ° μ μλλ‘ νμΈμ.
- λͺ¨λ°μΌμ μ΅μ ν: λͺ¨λ¬ λ μ΄μμμ λ°μνμΌλ‘ λμμΈνμ¬ μμ νλ©΄μμλ μ¬μ©μ μΉνμ μ΄λλ‘ νμΈμ.
- μ² μ ν ν μ€νΈ: λ€μν λΈλΌμ°μ μ κΈ°κΈ°μμ λͺ¨λ¬ λμμ ν μ€νΈνμ¬ μΌκ΄λ κ²½νμ 보μ₯νμΈμ.
- μ κ·Όμ± κ³ λ €: μ μ ν ARIA μμ±κ³Ό ν€λ³΄λ λ΄λΉκ²μ΄μ μ ꡬννμ¬ μ₯μ κ° μλ μ¬μ©μλ λͺ¨λ¬μ μ κ·Όν μ μλλ‘ νμΈμ.
μΈν°μ μ λΌμ°νΈμ λμ
μΈν°μ μ λΌμ°νΈλ λͺ¨λ¬ λ° μ€λ²λ μ΄ ν¨ν΄μ λν κ°λ ₯ν ν΄κ²°μ± μ μ 곡νμ§λ§, λ€λ₯Έ μ κ·Ό λ°©μλ κ³ λ €ν μ μμ΅λλ€:
- μ ν΅μ μΈ μν κ΄λ¦¬: Reactμ `useState` ν μ΄λ Redux λλ Zustandμ κ°μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ λͺ¨λ¬ κ°μμ±μ μ μ΄ν©λλ€. μ΄λ λ§€μ° κΈ°λ³Έμ μΈ λͺ¨λ¬ ꡬνμλ λ κ°λ¨νμ§λ§, κ·λͺ¨κ° 컀μ§λ©΄ κ΄λ¦¬νκΈ° μ΄λ €μμ§λλ€.
- νμ¬ λͺ¨λ¬ λΌμ΄λΈλ¬λ¦¬: React Modalμ΄λ Material UIμ κ°μ λΌμ΄λΈλ¬λ¦¬μ μ¬μ ꡬμΆλ λͺ¨λ¬ μ»΄ν¬λνΈλ₯Ό νμ©ν©λλ€. μ΄λ λΉ λ₯Έ ν΄κ²°μ± μ μ 곡ν μ μμ§λ§ μ¬μ©μ μ μ μ΅μ μ΄ μ νλ μ μμ΅λλ€.
- ν΄λΌμ΄μΈνΈ μΈ‘ λΌμ°ν λΌμ΄λΈλ¬λ¦¬: React Routerμ κ°μ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ ν΄λΌμ΄μΈνΈ μΈ‘ λΌμ°ν λ° λͺ¨λ¬ κ°μμ±μ κ΄λ¦¬ν μ μμ΅λλ€.
κ²°λ‘
Next.js μΈν°μ μ λΌμ°νΈλ μΉ μ ν리μΌμ΄μ μμ λͺ¨λ¬ λ° μ€λ²λ μ΄ ν¨ν΄μ ꡬννλ κ²¬κ³ νκ³ μ°μν λ°©λ²μ μ 곡ν©λλ€. μ΄ κ°λ ₯ν κΈ°λ₯μ νμ©νμ¬ μννκ³ SEO μΉνμ μ΄λ©° μ¬μ©μ μΉνμ μΈ κ²½νμ λ§λ€ μ μμ΅λλ€. λμμ μΈ μ κ·Ό λ°©μμ΄ μ‘΄μ¬νμ§λ§, μΈν°μ μ λΌμ°νΈλ λ νΉν μ‘°ν©μ μ΄μ μ μ 곡νμ¬ λͺ¨λ Next.js κ°λ°μμ λ¬΄κΈ°κ³ μμ κ°μΉ μλ λκ΅¬κ° λ©λλ€.